@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>甘特图详情</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .detail-header {
            background: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .detail-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        .detail-info {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .info-item {
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        .info-label {
            font-weight: bold;
            color: #666;
            margin-right: 8px;
        }
        .info-value {
            color: #333;
        }
        .gantt-detail-container {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .gantt-detail-header {
            background: #fafafa;
            padding: 15px 20px;
            border-bottom: 1px solid #e8e8e8;
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        .gantt-detail-chart {
            overflow-x: auto;
            overflow-y: hidden;
        }
        .detail-gantt-table {
            min-width: 1740px;
            border-collapse: collapse;
            width: 100%;
        }
        .detail-gantt-table th,
        .detail-gantt-table td {
            border: 1px solid #e6e6e6;
            padding: 8px;
            text-align: center;
            white-space: nowrap;
        }
        .detail-gantt-table th {
            background-color: #f8f9fa;
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .process-name {
            text-align: left !important;
            width: 240px;
            min-width: 240px;
            font-weight: bold;
            background: #fff;
            position: sticky;
            left: 0;
            z-index: 5;
            border-right: 2px solid #e6e6e6;
            position: relative;
            padding: 8px 4px;
        }
        .process-name th {
            background: #f8f9fa;
            z-index: 15;
        }
        
        .task-title {
            display: inline-block;
            max-width: 130px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
        
        .process-name .expand-btn {
            cursor: pointer;
            margin-right: 5px;
            color: #1890ff;
        }
        
        .status-tag {
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 11px;
            margin-left: 8px;
            font-weight: bold;
            display: inline-block;
            white-space: nowrap;
        }
        
        .status-tag.completed {
            background: #52c41a;
            color: white;
            box-shadow: 0 2px 4px rgba(82, 196, 26, 0.3);
        }
        
        .status-tag.confirmed {
            background: #1890ff;
            color: white;
            box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
        }
        
        .status-tag.draft {
            background: #8c8c8c;
            color: white;
            box-shadow: 0 2px 4px rgba(140, 140, 140, 0.3);
        }
        
        .status-tag.paused {
            background: #faad14;
            color: white;
            box-shadow: 0 2px 4px rgba(250, 173, 20, 0.3);
        }
        
        .status-tag.exception {
            background: #ff4d4f;
            color: white;
            box-shadow: 0 2px 4px rgba(255, 77, 79, 0.3);
        }
        
        .task-row {
            background: #fff;
        }
        
        .task-row:hover {
            background-color: #f5f5f5;
        }
        
        .task-row.completed {
            background-color: #f6ffed;
            border-left: 3px solid #52c41a;
        }
        
        .task-row.completed:hover {
            background-color: #d9f7be;
        }
        
        .time-header {
            background-color: #e8f4fd !important;
        }
        .day-header {
            background-color: #f0f8ff !important;
        }
        .hour-slot {
            width: 60px;
            height: 40px;
            position: relative;
            overflow: visible;
            border: 1px solid #e6e6e6;
            text-align: center;
            padding: 4px;
        }
        
        .production-bar-container {
            pointer-events: none;
            z-index: 10;
            white-space: nowrap;
        }
        
        .detail-progress-bar {
            height: 24px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 11px;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            white-space: nowrap;
            overflow: hidden;
        }
        
        .back-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 100;
        }
        
        .detail-stats {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        .stat-item {
            background: #f0f8ff;
            padding: 8px 12px;
            border-radius: 4px;
            border-left: 3px solid #1890ff;
        }
        .stat-label {
            font-size: 12px;
            color: #666;
        }
        .stat-value {
            font-size: 16px;
            font-weight: bold;
            color: #1890ff;
            margin-top: 2px;
        }
        
        /* 自定义滚动条 */
        .gantt-detail-chart::-webkit-scrollbar {
            height: 10px;
        }
        .gantt-detail-chart::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 5px;
        }
        .gantt-detail-chart::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 5px;
        }
        .gantt-detail-chart::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body>
    <button class="layui-btn layui-btn-primary back-btn" onclick="window.history.back()">
        <i class="layui-icon layui-icon-return"></i> 返回
    </button>

    <!-- 工单详细信息 -->
    <div class="detail-header">
        <div class="detail-title" id="workOrderTitle">工单详情</div>
        <div class="detail-info" id="workOrderInfo">
            <!-- 工单信息将通过JavaScript动态加载 -->
        </div>
        <div class="detail-stats" id="workOrderStats">
            <!-- 统计信息将通过JavaScript动态加载 -->
        </div>
    </div>

    <!-- 详细甘特图 -->
    <div class="gantt-detail-container">
        <div class="gantt-detail-header">
            <i class="layui-icon layui-icon-chart"></i> 详细生产甘特图
        </div>
        <div class="gantt-detail-chart">
            <table class="detail-gantt-table">
                <thead>
                    <tr>
                        <th rowspan="3" class="process-name">任务名</th>
                        <th rowspan="3">工序</th>
                        <th rowspan="3">开始时间</th>
                        <th rowspan="3">结束时间</th>
                        <th colspan="15" class="time-header">6月 14 - 6月 18</th>
                    </tr>
                    <tr>
                        <th colspan="3" class="day-header">6月 14</th>
                        <th colspan="3" class="day-header">6月 15</th>
                        <th colspan="3" class="day-header">6月 16</th>
                        <th colspan="3" class="day-header">6月 17</th>
                        <th colspan="3" class="day-header">6月 18</th>
                    </tr>
                    <tr>
                        <th style="width: 60px;">00:00</th>
                        <th style="width: 60px;">08:00</th>
                        <th style="width: 60px;">16:00</th>
                        <th style="width: 60px;">00:00</th>
                        <th style="width: 60px;">08:00</th>
                        <th style="width: 60px;">16:00</th>
                        <th style="width: 60px;">00:00</th>
                        <th style="width: 60px;">08:00</th>
                        <th style="width: 60px;">16:00</th>
                        <th style="width: 60px;">00:00</th>
                        <th style="width: 60px;">08:00</th>
                        <th style="width: 60px;">16:00</th>
                        <th style="width: 60px;">00:00</th>
                        <th style="width: 60px;">08:00</th>
                        <th style="width: 60px;">16:00</th>
                    </tr>
                </thead>
                <tbody id="detailGanttBody">
                    <!-- 详细甘特图数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
    </div>

    <script>
        layui.use(['layer'], function() {
            var layer = layui.layer;
            var workOrderId = @ViewBag.WorkOrderId;

            // 页面加载时获取工单详细信息
            loadWorkOrderDetail(workOrderId);

            // 加载工单详细信息
            function loadWorkOrderDetail(id) {
                var loadIndex = layer.load(1, {
                    shade: [0.3, '#fff']
                });

                // 调用专用的工单详情接口
                $.ajax({
                    url: '/ProductionScheduling/GetWorkOrderDetailById',
                    type: 'GET',
                    data: { id: id },
                    success: function(response) {
                        layer.close(loadIndex);
                        if (response.success && response.data) {
                            renderWorkOrderInfo(response.data);
                            renderDetailGantt(response.data);
                        } else {
                            var errorMsg = response.message || '获取工单详情失败';
                            
                            // 特殊处理状态不符合的情况
                            if (errorMsg.includes('状态不是已确认')) {
                                layer.confirm(errorMsg + '<br><br>只能查看已确认状态的工单详情，是否返回工单列表？', {
                                    icon: 3,
                                    title: '提示',
                                    btn: ['返回列表', '取消']
                                }, function(index) {
                                    window.location.href = '/ProductionScheduling/Index';
                                    layer.close(index);
                                });
                            } else if (errorMsg.includes('没有找到任何已确认状态的工单')) {
                                layer.confirm('当前系统中没有已确认状态的工单数据，是否返回工单列表？', {
                                    icon: 2,
                                    title: '无数据',
                                    btn: ['返回列表', '取消']
                                }, function(index) {
                                    window.location.href = '/ProductionScheduling/Index';
                                    layer.close(index);
                                });
                            } else {
                                layer.msg(errorMsg, {icon: 2});
                            }
                            showEmptyState();
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.close(loadIndex);
                        console.error('获取工单详情失败:', error);
                        layer.msg('网络请求失败，请检查网络连接', {icon: 2});
                        showEmptyState();
                    }
                });
            }

            // 显示空状态
            function showEmptyState() {
                $('#workOrderTitle').text('暂无工单数据');
                $('#workOrderInfo').html('<div class="info-item" style="color: #999; text-align: center; padding: 20px;">暂无工单信息</div>');
                $('#workOrderStats').html('<div class="stat-item"><div class="stat-label">提示</div><div class="stat-value">暂无数据</div></div>');
                $('#detailGanttBody').html('<tr><td colspan="25" style="text-align: center; padding: 50px; color: #999;">暂无甘特图数据</td></tr>');
            }

            // 渲染工单信息
            function renderWorkOrderInfo(data) {
                $('#workOrderTitle').text((data.workOrderCode || '') + ' - ' + (data.workOrderName || ''));
                
                var infoHtml = 
                    '<div class="info-item"><span class="info-label">产品编码:</span><span class="info-value">' + (data.productCode || '') + '</span></div>' +
                    '<div class="info-item"><span class="info-label">产品名称:</span><span class="info-value">' + (data.productName || '') + '</span></div>' +
                    '<div class="info-item"><span class="info-label">规格型号:</span><span class="info-value">' + (data.productModel || '') + '</span></div>' +
                    '<div class="info-item"><span class="info-label">客户:</span><span class="info-value">' + (data.customerName || '') + ' (' + (data.customerCode || '') + ')</span></div>' +
                    '<div class="info-item"><span class="info-label">需求日期:</span><span class="info-value">' + (data.demandDate ? formatDateTime(data.demandDate) : '') + '</span></div>' +
                    '<div class="info-item"><span class="info-label">计划时间:</span><span class="info-value">' + (data.plannedStartTime ? formatDateTime(data.plannedStartTime) : '') + ' ~ ' + (data.plannedEndTime ? formatDateTime(data.plannedEndTime) : '') + '</span></div>';
                
                $('#workOrderInfo').html(infoHtml);

                var statsHtml = 
                    '<div class="stat-item"><div class="stat-label">工单数量</div><div class="stat-value">' + (data.workOrderQuantity || 0) + ' ' + (data.unit || 'PCS') + '</div></div>' +
                    '<div class="stat-item"><div class="stat-label">已完成</div><div class="stat-value">' + (data.completedQuantity || 0) + ' ' + (data.unit || 'PCS') + '</div></div>' +
                    '<div class="stat-item"><div class="stat-label">完成进度</div><div class="stat-value">' + (data.progressPercent || 0) + '%</div></div>' +
                    '<div class="stat-item"><div class="stat-label">生产状态</div><div class="stat-value">' + (data.productionStatusText || '') + '</div></div>';
                
                $('#workOrderStats').html(statsHtml);
            }

            // 格式化日期时间
            function formatDateTime(dateStr) {
                if (!dateStr) return '';
                try {
                    var date = new Date(dateStr);
                    return date.getFullYear() + '-' + 
                           String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                           String(date.getDate()).padStart(2, '0') + ' ' +
                           String(date.getHours()).padStart(2, '0') + ':' + 
                           String(date.getMinutes()).padStart(2, '0');
                } catch(e) {
                    return dateStr;
                }
            }

            // 渲染详细甘特图
            function renderDetailGantt(data) {
                var tbody = $('#detailGanttBody');
                tbody.empty();

                if (!data) {
                    tbody.append('<tr><td colspan="19" style="text-align: center; padding: 20px;">暂无数据</td></tr>');
                    return;
                }

                // 根据生产状态生成对应的状态标签（0=草稿，1=已确认，2=已完成）
                var statusTag = '';
                switch(data.productionStatus) {
                    case 0:
                        statusTag = '<span class="status-tag draft">草稿</span>';
                        break;
                    case 1:
                        statusTag = '<span class="status-tag confirmed">已确认</span>';
                        break;
                    case 2:
                        statusTag = '<span class="status-tag completed">✅ 已完成</span>';
                        break;
                    default:
                        statusTag = '<span class="status-tag draft">草稿</span>';
                        break;
                }
                
                // 显示工单信息：工单编码 - 工单名称 (产品编码 产品名称)
                var taskTitle = data.workOrderCode + ' - ' + data.workOrderName + 
                              ' (' + data.productCode + ' ' + data.productName + ')';
                
                var rowClass = 'task-row';
                if (data.productionStatus === 2) {
                    rowClass += ' completed';
                }
                
                var row = '<tr class="' + rowClass + '">' +
                    '<td class="process-name" title="' + taskTitle + '">' +
                    '<i class="layui-icon layui-icon-triangle-d expand-btn"></i>' +
                    '<span class="task-title">' + taskTitle + '</span>' + statusTag +
                    '</td>' +
                    '<td>' + (data.processInfo || '主工序') + '</td>' +
                    '<td>' + (data.plannedStartTime ? formatDateTime(data.plannedStartTime) : 
                              formatDateTime(data.demandDate)) + '</td>' +
                    '<td>' + (data.plannedEndTime ? formatDateTime(data.plannedEndTime) : 
                              formatDateTime(data.demandDate)) + '</td>';
                
                // 计算进度条的跨度和位置
                var totalSlots = 15;
                
                // 进度条显示的文本
                var progressText = data.workOrderCode + ': ' + data.workOrderQuantity + 
                                 (data.unit || 'PCS') + ' 完成比例: ' + (data.progressPercent || 0) + '%';
                
                // 根据生产状态确定进度条颜色
                var progressColor = '#52c41a'; // 默认绿色
                if (data.productionStatus === 0) {
                    progressColor = '#8c8c8c'; // 草稿 - 灰色
                } else if (data.productionStatus === 1) {
                    progressColor = '#1890ff'; // 已确认 - 蓝色
                } else if (data.productionStatus === 2) {
                    progressColor = '#52c41a'; // 已完成 - 绿色
                }
                
                // 计算进度条的实际位置和宽度
                var ganttInfo = calculateGanttPosition(data);
                
                // 添加时间槽
                for (var i = 0; i < totalSlots; i++) {
                    if (i === ganttInfo.startSlot) {
                        // 第一个进度条格子，包含跨列的进度条
                        row += '<td class="hour-slot" style="position: relative;">' +
                            '<div class="production-bar-container" style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); ' +
                            'width: ' + (ganttInfo.span * 100) + '%; height: 24px; z-index: 10;">' +
                            '<div class="detail-progress-bar" style="width: 100%; height: 100%; background: ' + progressColor + '; ' +
                            'border-radius: 4px; display: flex; align-items: center; justify-content: center; ' +
                            'color: white; font-size: 11px; font-weight: bold; white-space: nowrap; overflow: hidden;">' +
                            progressText +
                            '</div>' +
                            '</div>' +
                            '</td>';
                    } else if (i > ganttInfo.startSlot && i < ganttInfo.startSlot + ganttInfo.span) {
                        // 被进度条覆盖的格子，设置为透明
                        row += '<td class="hour-slot" style="position: relative;"></td>';
                    } else {
                        // 普通空白格子
                        row += '<td class="hour-slot"></td>';
                    }
                }
                
                row += '</tr>';
                tbody.append(row);
                
                // 绑定展开/收起事件
                bindExpandEvents();
            }
            
            // 计算甘特图进度条的位置和跨度（与列表页相同的逻辑）
            function calculateGanttPosition(item) {
                // 甘特图时间基准：6月14日 00:00 到 6月18日 23:59
                var ganttStartDate = new Date('2025-06-14 00:00:00');
                var ganttEndDate = new Date('2025-06-18 23:59:59');
                
                // 获取任务的开始和结束时间
                var taskStartTime = item.plannedStartTime ? new Date(item.plannedStartTime) : new Date(item.demandDate);
                var taskEndTime = item.plannedEndTime ? new Date(item.plannedEndTime) : new Date(item.demandDate);
                
                // 如果任务时间超出甘特图范围，调整到甘特图范围内
                if (taskStartTime < ganttStartDate) taskStartTime = ganttStartDate;
                if (taskEndTime > ganttEndDate) taskEndTime = ganttEndDate;
                if (taskStartTime > ganttEndDate) taskStartTime = new Date(ganttEndDate.getTime() - 8 * 60 * 60 * 1000); // 前8小时
                if (taskEndTime < ganttStartDate) taskEndTime = new Date(ganttStartDate.getTime() + 8 * 60 * 60 * 1000); // 后8小时
                
                // 时间槽定义：每天3个时段，总共15个槽
                // 6月14日：0-00:00, 1-08:00, 2-16:00
                // 6月15日：3-00:00, 4-08:00, 5-16:00
                // 6月16日：6-00:00, 7-08:00, 8-16:00
                // 6月17日：9-00:00, 10-08:00, 11-16:00  
                // 6月18日：12-00:00, 13-08:00, 14-16:00
                
                function getTimeSlot(date) {
                    var day = date.getDate();
                    var hour = date.getHours();
                    
                    var baseSlot = 0;
                    if (day === 14) baseSlot = 0;
                    else if (day === 15) baseSlot = 3;
                    else if (day === 16) baseSlot = 6;
                    else if (day === 17) baseSlot = 9;
                    else if (day === 18) baseSlot = 12;
                    else return 0; // 默认
                    
                    if (hour < 8) return baseSlot;
                    else if (hour < 16) return baseSlot + 1;
                    else return baseSlot + 2;
                }
                
                var startSlot = getTimeSlot(taskStartTime);
                var endSlot = getTimeSlot(taskEndTime);
                
                // 确保至少跨越1个时间槽
                if (endSlot <= startSlot) {
                    endSlot = Math.min(startSlot + 1, 14);
                }
                
                var span = endSlot - startSlot + 1;
                
                return {
                    startSlot: startSlot,
                    span: span
                };
            }
            
            // 绑定甘特图展开/收起功能
            function bindExpandEvents() {
                $('.expand-btn').off('click').on('click', function() {
                    var $this = $(this);
                    if ($this.hasClass('layui-icon-triangle-d')) {
                        $this.removeClass('layui-icon-triangle-d').addClass('layui-icon-triangle-r');
                    } else {
                        $this.removeClass('layui-icon-triangle-r').addClass('layui-icon-triangle-d');
                    }
                });
            }
        });
    </script>
</body>
</html> 